<template>
  <div class="btn">
    <el-form :model="listData" :rules="rules" ref="listData" label-width="80px" class="demo-ruleForm">
      <!--<el-form ref="form" :model="form" label-width="80px">-->
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 30px">
        <el-col :span="1" style="color: darkgoldenrod;">1/3</el-col>
        <el-col :span="4">基本信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="姓名">
            <el-input v-model="listData.student_name" placeholder="" :value="listData.student_name" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="性别" prop="sex">
            <el-select :value="listData.sex.toString()" placeholder="请选择性别" disabled>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!--<div class="box_content">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="form.nation" placeholder="汉"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="国籍" prop="nationality">
            <el-input v-model="form.nationality" placeholder="中国"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="出生年月" prop="birthday">
            <el-date-picker type="date" placeholder="日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </div>-->
      </div>
      <!--<el-row>
        <el-col :span="4">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" :value="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别" prop="sex">
            <el-input v-model="form.sex" placeholder="男/女"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="form.nation" placeholder="汉"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="国籍" prop="nationality">
            <el-input v-model="form.nationality" placeholder="中国"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生年月" prop="birthday">
            <el-date-picker type="date" placeholder="日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!--==========================================================================================-->
      <div class="box">
        <!--<div class="box_content">
          <el-form-item label="联系电话" prop="phone">
            <el-input placeholder="请输入" v-model="form.phone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>-->
        <div class="box_content">
          <el-form-item label="证件号码" prop="number">
            <el-input placeholder="" v-model="listData.card" class="input-with-select" disabled>
              <el-select v-model="listData.card_type" slot="prepend" placeholder="请选择证件类型" style="width: 90px" disabled>
                <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <el-row>
        <el-form-item label="">
          <el-switch
            v-model="value1"
            active-text="此手机号是否关智助教育APP学生版">
          </el-switch>
        </el-form-item>
      </el-row>
      <!--<el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input placeholder="请输入" v-model="form.phone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="font-weight: bold">
          <el-form-item label="证件号码" prop="number">
            <el-input placeholder="请输入证件号码" v-model="form.number" class="input-with-select">
              <el-select v-model="value" slot="prepend" placeholder="请选择证件类型" style="width: 90px">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="通行证" value="2"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>
        <el-form-item label="">
          <el-switch
            v-model="value1"
            active-text="此手机号是否关智助教育APP学生版">
          </el-switch>
        </el-form-item>
      </el-row>-->
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 30px">
        <el-col :span="1" style="color: darkgoldenrod;">2/3</el-col>
        <el-col :span="4">家庭信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="家长姓名">
            <el-input v-model="listData.home[0].parent_name" placeholder="" disabled></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="家长称谓">
            <el-select v-model="listData.home[0].relation.toString()" placeholder="请选择称谓" disabled>
              <el-option label="爸爸" value="1"></el-option>
              <el-option label="妈妈" value="2"></el-option>
              <el-option label="爷爷" value="3"></el-option>
              <el-option label="奶奶" value="4"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="联系电话">
            <el-input placeholder="" v-model="listData.home[0].phone" disabled>
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <!--<el-row>
        <el-col :span="6">
          <el-form-item label="家长姓名">
            <el-input v-model="form.FatherName" placeholder="请输入家长姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="家长称谓">
            <el-input v-model="form.DaD"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话">
            <el-input placeholder="请输入" v-model="form.FatherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <el-row>
        <el-form-item label="">
          <el-switch
            v-model="value1"
            active-text="此手机号是否关智助教育APP学生版">
          </el-switch>
        </el-form-item>
      </el-row>
      <!--==========================================================================================-->
      <!--<div class="box">
        <div class="box_content">
          <el-form-item label="家长姓名">
            <el-input v-model="form.MotherName" placeholder="请输入家长姓名"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="家长称谓">
            <el-input v-model="form.MoM"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="联系电话">
            <el-input placeholder="请输入" v-model="form.MotherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>
      </div>-->
      <!--<el-row>
        <el-col :span="6">
          <el-form-item label="家长姓名">
            <el-input v-model="form.MotherName" placeholder="请输入家长姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="家长称谓">
            <el-input v-model="form.MoM"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话">
            <el-input placeholder="请输入" v-model="form.MotherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!--<el-form-item label="">
        <el-switch
          v-model="value1"
          active-text="此手机号是否关智助教育APP学生版">
        </el-switch>
      </el-form-item>-->
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 30px">
        <el-col :span="1" style="color: darkgoldenrod;">3/3</el-col>
        <el-col :span="4">招生信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span=24>
          <div style="width: 100%;height: 200px;font-size: 150px;border: 1px solid black;text-align: center;line-height: 200px;border-radius:25px;" class="el-icon-shopping-cart-2" @click="dialogVisible = true"></div>
        </el-col>
      </el-row>
      <!--添加购物项目-->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="70%" append-to-body>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程类" name="first">
            <el-form ref="form" :model="form" label-width="80px">
              <!--==========================================================================================-->
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="学期">
                      <el-select placeholder="请选择学期">
                        <el-option label="第一学期" value="第一学期"></el-option>
                        <el-option label="第二学期" value="第二学期"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="年级">
                      <el-select placeholder="请选择年级">
                        <el-option label="一年级" value="一年级"></el-option>
                        <el-option label="二年级" value="二年级"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="课程">
                      <el-select placeholder="请选择课程">
                        <el-option label="语文" value="1"></el-option>
                        <el-option label="数学" value="2"></el-option>
                        <el-option label="英语" value="3"></el-option>
                        <el-option label="物理" value="4"></el-option>
                        <el-option label="化学" value="5"></el-option>
                        <el-option label="生物" value="6"></el-option>
                        <el-option label="历史" value="7"></el-option>
                        <el-option label="政治" value="8"></el-option>
                        <el-option label="地理" value="9"></el-option>
                        <el-option label="信息科技" value="10"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="授课老师">
                      <el-select placeholder="请选择授课老师">
                        <el-option label="陈老师" value="陈老师"></el-option>
                        <el-option label="李老师" value="李老师"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="活动区域">
                      <el-select placeholder="请选择活动区域">
                        <el-option label="区域一" value="区域一"></el-option>
                        <el-option label="区域二" value="区域二"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="收费类目">
                      <el-select placeholder="请选择活动区域">
                        <el-option label="类目一" value="类目一"></el-option>
                        <el-option label="类目二" value="类目二"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                    <el-table :data="tableData" border style="width: 100%">
                      <el-table-column fixed prop="date" label="收费编号" width="150">
                      </el-table-column>
                      <el-table-column prop="name" label="名称" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="province" label="课程类型" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="city" label="进度" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="address" label="已报人数" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="zip" label="开课时间" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="zip" label="开课时间" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column fixed="right" label="操作" width="180">
                        <template slot-scope="scope">
                          <el-button @click="handleClick2(scope.row)" type="primary" size="small">信息</el-button>
                          <el-button type="warning" size="small">加入购物车</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-col>
              </el-row>
              <hr/>
              <el-row>
                <el-col :span="20">
                  <div>1、2020年冬季  国际朗文课程   线下课程  开课时间：2020年12月12日 上课日期：一、二、三、四、五、六、日  上课时间10：00-12：00</div>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <div>金额：1000  元</div>
                </el-col>
                <el-col :span="20">
                  <div>2、国际朗文3 AB教材     1套</div>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <div>金额：100  元</div>
                </el-col>
                <div style="float: right;font-size: 100px;margin-top: 0px;margin-bottom: 0px" class="el-icon-shopping-cart-2"></div>
                <el-col :span="24">
                  <div style="float: right">
                    <el-button type="primary">重置</el-button>
                    <el-button type="primary">保存</el-button>
                  </div>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                  <el-form-item label="备注">
                    <el-input type="textarea" placeholder="请输入备注"  maxlength="1000" show-word-limit></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                  <div style="float: right">
                    <el-button type="primary" @click="onSubmit">确认提交</el-button>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="教辅类" name="second">
            <el-form ref="form" :model="form" label-width="80px">
              <!--==========================================================================================-->
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="学期">
                      <el-select placeholder="请选择学期">
                        <el-option label="第一学期" value="第一学期"></el-option>
                        <el-option label="第二学期" value="第二学期"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="年级">
                      <el-select placeholder="请选择年级">
                        <el-option label="一年级" value="一年级"></el-option>
                        <el-option label="二年级" value="二年级"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="课程">
                      <el-select placeholder="请选择课程">
                        <el-option label="语文" value="1"></el-option>
                        <el-option label="数学" value="2"></el-option>
                        <el-option label="英语" value="3"></el-option>
                        <el-option label="物理" value="4"></el-option>
                        <el-option label="化学" value="5"></el-option>
                        <el-option label="生物" value="6"></el-option>
                        <el-option label="历史" value="7"></el-option>
                        <el-option label="政治" value="8"></el-option>
                        <el-option label="地理" value="9"></el-option>
                        <el-option label="信息科技" value="10"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="授课老师">
                      <el-select placeholder="请选择授课老师">
                        <el-option label="陈老师" value="陈老师"></el-option>
                        <el-option label="李老师" value="李老师"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="活动区域">
                      <el-select placeholder="请选择活动区域">
                        <el-option label="区域一" value="区域一"></el-option>
                        <el-option label="区域二" value="区域二"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="收费类目">
                      <el-select placeholder="请选择活动区域">
                        <el-option label="类目一" value="类目一"></el-option>
                        <el-option label="类目二" value="类目二"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row type="flex" justify="center">
                <el-col :span="24">
                  <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                    <el-table :data="tableData" border style="width: 100%;">
                      <el-table-column fixed prop="date" label="收费编号" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="name" label="名称" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="province" label="类目" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="city" label="库存" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column label="购买数量" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                          <el-input-number v-model="num" @change="handleChange2" :min="1" :max="10" label="描述文字"></el-input-number>
                        </template>
                      </el-table-column>
                      <el-table-column prop="zip" label="价格" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="zip" label="开课时间" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column fixed="right" label="操作" width="180">
                        <template slot-scope="scope">
                          <el-button @click="handleClick2(scope.row)" type="warning" size="small">加入购物车</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-col>
              </el-row>
              <hr/>
              <el-row>
                <el-col :span="20">
                  <div>1、2020年冬季  国际朗文课程   线下课程  开课时间：2020年12月12日 上课日期：一、二、三、四、五、六、日  上课时间10：00-12：00</div>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <div>金额：1000  元</div>
                </el-col>
                <el-col :span="20">
                  <div>2、国际朗文3 AB教材     1套</div>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <div>金额：100  元</div>
                </el-col>
                <div style="float: right;font-size: 100px;margin-top: 0px;margin-bottom: 0px" class="el-icon-shopping-cart-2"></div>
                <el-col :span="24">
                  <div style="float: right">
                    <el-button type="primary">重置</el-button>
                    <el-button type="primary">保存</el-button>
                  </div>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                  <el-form-item label="备注">
                    <el-input type="textarea" placeholder="请输入备注"  maxlength="1000" show-word-limit></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                  <div style="float: right">
                    <el-button type="primary" @click="onSubmit">确认提交</el-button>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="杂费类" name="third">
            <el-form ref="form" :model="form" label-width="80px">
              <!--==========================================================================================-->
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="学期">
                      <el-select placeholder="请选择学期">
                        <el-option label="第一学期" value="第一学期"></el-option>
                        <el-option label="第二学期" value="第二学期"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="年级">
                      <el-select placeholder="请选择年级">
                        <el-option label="一年级" value="一年级"></el-option>
                        <el-option label="二年级" value="二年级"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="课程">
                      <el-select placeholder="请选择课程">
                        <el-option label="语文" value="1"></el-option>
                        <el-option label="数学" value="2"></el-option>
                        <el-option label="英语" value="3"></el-option>
                        <el-option label="物理" value="4"></el-option>
                        <el-option label="化学" value="5"></el-option>
                        <el-option label="生物" value="6"></el-option>
                        <el-option label="历史" value="7"></el-option>
                        <el-option label="政治" value="8"></el-option>
                        <el-option label="地理" value="9"></el-option>
                        <el-option label="信息科技" value="10"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="授课老师">
                      <el-select placeholder="请选择授课老师">
                        <el-option label="陈老师" value="陈老师"></el-option>
                        <el-option label="李老师" value="李老师"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="活动区域">
                      <el-select placeholder="请选择活动区域">
                        <el-option label="区域一" value="区域一"></el-option>
                        <el-option label="区域二" value="区域二"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="收费类目">
                      <el-select placeholder="请选择活动区域">
                        <el-option label="类目一" value="类目一"></el-option>
                        <el-option label="类目二" value="类目二"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
              <el-row type="flex" justify="center">
                <el-col :span="24">
                  <div class="grid-content bg-purple" style="margin: 0 auto; text-align: center">
                    <el-table
                      :data="tableData"
                      border
                      style="width: 100%;">
                      <el-table-column fixed prop="date" label="收费编号" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="name" label="名称" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="province" label="类目" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="city" label="库存" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column label="购买数量" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                          <el-input-number v-model="num" @change="handleChange2" :min="1" :max="10" label="描述文字"></el-input-number>
                        </template>
                      </el-table-column>
                      <el-table-column prop="zip" label="价格" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="zip" label="开课时间" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column fixed="right" label="操作" width="180">
                        <template slot-scope="scope">
                          <el-button @click="handleClick2(scope.row)" type="warning" size="small">加入购物车</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-col>
              </el-row>
              <hr/>
              <el-row>
                <el-col :span="20">
                  <div>1、2020年冬季  国际朗文课程   线下课程  开课时间：2020年12月12日 上课日期：一、二、三、四、五、六、日  上课时间10：00-12：00</div>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <div>金额：1000  元</div>
                </el-col>
                <el-col :span="20">
                  <div>2、国际朗文3 AB教材     1套</div>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <div>金额：100  元</div>
                </el-col>
                <el-col :span="20">
                  <div>3、优惠折扣     1笔</div>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <div>金额：-200  元</div>
                </el-col>
                <div style="float: right;font-size: 100px;margin-top: 0px;margin-bottom: 0px" class="el-icon-shopping-cart-2"></div>
                <el-col :span="24">
                  <div style="float: right">
                    <el-button type="primary">重置</el-button>
                    <el-button type="primary">保存</el-button>
                  </div>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                  <el-form-item label="备注">
                    <el-input type="textarea" placeholder="请输入备注"  maxlength="1000" show-word-limit></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                  <div style="float: right">
                    <el-button type="primary" @click="onSubmit">确认提交</el-button>
                  </div>
                </el-col>
              </el-row>
              <!--==========================================================================================-->
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <el-row style="margin-top: 10px;margin-bottom: 30px">
        <el-col :span="24">
          <div>收费核算：</div>
        </el-col>
        <div style="height: 100px"></div>
        <hr/>
        <div style="float: right;margin-right: 100px">合计费用：</div>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-form-item label="备注">
          <el-input type="textarea" placeholder="请输入，不超过1000字" v-model="form.textarea" maxlength="1000" show-word-limit></el-input>
        </el-form-item>
      </el-row>
      <!--==========================================================================================-->
    </el-form>
    <!--==========================================================================================-->
    <el-row style="float: right;margin-bottom: 20px">
      <el-col :span="24">
        <el-button type="primary" @click="onSubmit">确 认 提 交</el-button>
      </el-col>
    </el-row>
    <!--==========================================================================================-->
    <!--==========================================================================================-->
  </div>
</template>

<script>
    export default {
        name: 'Button',
        /*城市级联*/
        props: {
          listData: {
            type: [Object],
            default: () => []
          },
          /**
           * 默认区域传入格式:
           * 非多选(props.multiple = false): 北京市/北京市/东城区
           * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
           */
          value: {
            type: String,
            default: ''
          },
          /**
           * 默认是regionData
           * regionData(省市区) provinceAndCityData(省市)
           */
          optionType: {
            type: String,
            default: 'regionData',
            validator: function(value) {
              return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
            }
          },
          /**
           * 是否需要开启全国
           */
          isAddAll: {
            type: Boolean,
            default: false
          },
          placeholder: {
            type: String,
            default: ''
          },
          props: {
            type: Object,
            default() {
              return {}
            }
          }
        },
        data(){
          return{
            num: 1,
            activeName: 'first',
            dialogVisible: false,
            value1: true,
            switchApp: true,
            /*弹出框属性*/
            NewStudentFile:false,
            /*城市级联*/
            cityArr: [],
            options: [],
            isChange: false,
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-04',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1517 弄',
              zip: 200333
            }, {
              date: '2016-05-01',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1519 弄',
              zip: 200333
            }, {
              date: '2016-05-03',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1516 弄',
              zip: 200333
            }],
            form: {
              name: '', /*姓名*/
              sex: '',  /*性别*/
              nation: '', /*民族*/
              nationality: '',  /*国籍*/
              birthday: '', /*出生年月日*/
              phone: '',  /*联系电话*/
              number:'',  /*身份证号码*/
              recommend: '',  /*推荐人*/
              teacher: '',  /*主跟进人*/
              DaD: '爸爸',  /*父亲称谓*/
              MoM: '妈妈',  /*母亲称谓*/
              FatherName: '', /*父亲名字*/
              MotherName: '', /*母亲名字*/
              FatherPhone: '',  /*爸爸电话*/
              MotherPhone: '',  /*妈妈电话*/
              Chinese: '',  /*语文*/
              Math: '', /*数学*/
              English: '',  /*英语*/
              Physics: '',  /*物理*/
              Chemistry: '',  /*化学*/
              History: '',  /*历史*/
              Geography: '',  /*地理*/
              Politics: '', /*政治*/
              Biology: '',  /*生物*/
              Technology: '', /*信息科技*/
              DetailedAddress: '',  /*详细地址*/
              textarea: '',  /*备注*/
              SelectTeacher: '',
              province: []
            },
            SelectSemester: '',
            SelectGrade: '',
            SelectCourse: '',
            SelectSchool: '',
            SelectTeacher: '',
            SelectChannel: '',
            SelectTeacher2: '',
            SelectSchooling: '',
            SelectGradeing: '',
            province: [],
            city: '',
            area: '',
            /*证件*/
            cardType: [{
              value: 1,
              label: '身份证'
            }, {
              value: 2,
              label: '军官证'
            }],
            /*学期*/
            semester: [{
              value: '选项1',
              label: '第一学期'
            }, {
              value: '选项2',
              label: '第二学期'
            }],
            /*曾读学校*/
            school: [{
              value: '选项1',
              label: '一小'
            }, {
              value: '选项2',
              label: '二小'
            }],
            /*招生来源*/
            channel: [{
              value: '选项1',
              label: '网上'
            }, {
              value: '选项2',
              label: '专台'
            }],
            /*年级*/
            grade: [{
              value: '选项1',
              label: '一年级'
            }, {
              value: '选项2',
              label: '二年级'
            }],
            /*课程*/
            course: [{
              value: '选项1',
              label: '语文'
            }, {
              value: '选项2',
              label: '英语'
            }, {
              value: '选项2',
              label: '数学'
            }],
            /*副跟进人*/
            teacher2: [{
              value: '选项1',
              label: '陈老师'
            }, {
              value: '选项2',
              label: '李老师'
            }],
            /*表单验证*/
            rules: {
              name: [
                { required: true, message: '请输入姓名', trigger: 'blur' }
              ],
              sex: [
                { required: true, message: '请输入性别', trigger: 'blur' }
              ],
              nation: [
                { required: true, message: '请输入民族', trigger: 'blur' }
              ],
              nationality: [
                { required: true, message: '请输入国籍', trigger: 'blur' }
              ],
              birthday: [
                { required: true, message: '请选择日期', trigger: 'blur' }
              ],
              phone: [
                { required: true, message: '请输入联系方式', trigger: 'blur' }
              ],
              number: [
                { required: true, message: '请输入证件号', trigger: 'blur' }
              ],
              province: [
                { required: true, message: '请选择省市区', trigger: 'change' }
              ],
              DetailedAddress: [
                { required: true, message: '请输入详细地址', trigger: 'change' }
              ]
            }
            /*======================================================================*/
          }
        },
      /*城市级联*/
      methods: {
        onSubmit(){
          alert("提交成功！！！")
        },
        handleClick(tab, event) {
          console.log(tab, event);
        },
        handleClick2(row) {
          console.log(row);
        },
        /*提交*/
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
              this.NewStudentFile = false
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        /*重置*/
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        handleChange2(value) {
          console.log(value);
        },
        handleChange(event) {
          this.$emit('change', event)
          this.cityArr = event
          let str = ''
          if (this.props.multiple) { // 多选
            event.forEach(item => {
              str += this.handleRegionStr(item) + ','
            })
            str = str.slice(0, str.length - 1)
          } else {
            str = this.handleRegionStr(event)
          }
          this.isChange = true
          this.$emit('input', str)
          console.log('选中:', event)
        }
      },
    }
</script>

<style scoped>
  .btn{
    margin-bottom: 15px;
  }
  .selectForm >>> .el-form-item__label {
    font-size: 17px;
  }
  .btn{
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 0px;
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 200px;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
